<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.css}">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script type="text/javascript" th:src="@{/bootstrap/js/jquery-3.5.1.js}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <style>

        .disableCss {
            pointer-events: none;
            color: #afafaf;
            cursor: default;
            opacity: 0.5;
        }

        .container-fluid {
            padding-right: 75px;
            padding-left: 75px;
        }
    </style>
    <script>
        function goDetail(stuid, name, course, grade, id) {
            $("#stuid").html("学号：" + stuid);
            $("#name").html("姓名：" + name);
            $("#course").html("《" + course + "》");
            $("#grade").html("成绩：" + grade);
            $("#update").val(grade);
            $("#id").val(id);
        }

    </script>
</head>

<body>
<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-auto column">
            <div class="page-header">
                <h3>
                    学生成绩管理 <small>管理成绩信息：</small>
                </h3>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>课程</th>
                    <th>分数</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="grade:${message}">
                    <td th:text="${grade.getStuid()}"></td>
                    <td th:text="${grade.getName()}"></td>
                    <td th:text="${grade.getCourse()}"></td>
                    <td th:text="${grade.getGrade()}"></td>
                    <!-- 'javascript:searchHot(\''+${hot.name}+'\',\''+${hot.hotType}+'\')'-->
                    <td>
                        <button class="btn btn-info btn-sm" data-target="#myModal1" data-toggle="modal"
                                th:onclick="goDetail([[${grade.getStuid()}]],[[${grade.getName()}]],[[${grade.getCourse()}]],[[${grade.getGrade()}]],[[${grade.getId()}]])">
                            编辑
                        </button>
                        <!--                        <button class="btn" th:data-id="${stu}" onclick="goDetail(this.getAttribute('stu'))" type="button">获得</button>-->

                        <!-- Modal -->
                        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <h4 class="modal-title" id="course"></h4>
                                    </div>
                                    <div class="modal-body">
                                        <p id="stuid"></p>
                                        <p id="name"></p>
                                        <p id="grade"></p>
                                        <form th:action="@{/managementGrade/update}">
                                            修改成绩为：<input id="update" type="text" name="grade">
                                            <input id="id" type="hidden" name="id">
                                            <button type="submit" class="btn btn-success">提交</button>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <a type="button" class="btn btn-danger btn-sm"
                           th:href="@{/managementGrade/delete/}+${grade.getId()}">删除</a>
                    </td>
                </tr>
                </tbody>
                <h2>
                    <button class="btn btn-sm btn-success" data-target="#myModal2" data-toggle="modal">添加成绩信息</button>
                    <a type="button" class="btn btn-success" th:href="@{/reportExcel/}+2">导出Excel表格</a>
                    <form th:action="@{/managementGrade/select}">
                        <select name="type">
                            <option value="stuid">按学生学号查询</option>
                            <!--                            <option value="name">按学生姓名查询</option>-->
                            <option value="course">按选修课程查询</option>
                        </select>
                        <label>查询内容：</label>
                        <input type="text" name="content">
                        <button type="submit" class="btn btn-success">提交</button>
                    </form>
                </h2>


                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" da ta-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title">添加成绩信息</h4>
                            </div>
                            <div class="modal-body">
                                <form th:action="@{/managementGrade/insert}">
                                    <p align="center">学号：<input type="text" name="stuid"><br>
                                        课程：<input type="text" name="course"><br>
                                        成绩：<input type="text" name="grade"><br>
                                        <button type="submit" class="btn btn-success">提交</button>
                                    </p>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </table>
        </div>
    </div>
</div>
</body>
</html>
